* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.main {
    padding-bottom: 15.555556vw;
    background-color: #fefefe;
}

.lunbo {
    position: relative;
    width: 100%;
    height: 66.666667vw;
}

.search-area {
    position: absolute;
    top: 8.888889vw;
    left: 4.444444vw;
    width: 91.111111vw;
    height: 11.111111vw;
    background-color: #1919194d;
    border-radius: 5.555556vw;
    display: flex;
    align-items: center;
}

.search-area img {
    width: 3.611111vw;
    height: 3.611111vw;
    margin-left: 5.555556vw;
}

.search-area span {
    line-height: 6.111111vw;
    color: #fff;
    font-size: 3.888889vw;
    margin-left: 5.555556vw;
}

.lunbo-img {
    width: 100%;
    height: 100%;
}

.fenlei {
    display: flex;
    width: 100vw;
    height: 22.222222vw;
    margin: 4.444444vw 0;
    justify-content: space-evenly;
    align-items: center;
}

.fenlei div {
    height: 22.222222vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 16.666667vw;
    border-radius: 8.333333vw;
    background-color: #f9f6f0;
}

.fenlei img {
    width: 11.111111vw;
    height: 11.111111vw;
    margin-bottom: 1.388889vw;
    border-radius: 1.388889vw;
}

.fenlei p {
    font-size: 2.777778vw;
}

.tehui {
    width: 95.555556vw;
    height: 46.111111vw;
    margin: 0 auto;
    background-image: url('./image/tehui_bg.png');
    background-size: contain;
    padding: 0 2.222222vw;
}

.tehui .title {
    height: 5.555556vw;
    margin: 3.055556vw 0;
}

.tehui .content {
    margin-top: -5px;
    width: 100%;
    height: 32.222222vw;
    background-color: #fff;
    border-radius: 1.944444vw;
    display: flex;
}

.tehui .content img {
    width: 23.888889vw;
    height: 32.222222vw;
}

.tehui .content .tehui-items {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
}

.tehui .content .item {
    width: 19.444444vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tehui .content .item img {
    height: 19.444444vw;
    width: 19.444444vw;
    margin-bottom: 1.388889vw;
}

.tehui .content .item span {
    padding: 0.555556vw 1.388889vw;
    background-image: linear-gradient(135deg, #FD3F8F, #FF773C);
    font-size: 3.333333vw;
    border-radius: 1.388889vw;
}

.baoyi {
    width: 95.555556vw;
    height: 46.111111vw;
    margin: 2.222222vw auto;

    display: flex;
    justify-content: space-between;
}

.baoyi .baokuan {
    height: 100%;
    padding: 2.222222vw;
    width: 46.666667vw;
    border-radius: 2.222222vw;
}


.baoyi .baokuan:first-child {
    background-color: #EDF1FB;
}

.baoyi .baokuan:last-child {
    background-color: #FCF6EA;
}

.baoyi .baokuan .title {
    font-size: 3.888889vw;
    line-height: 6.111111vw;
    color: #434343;
    vertical-align: middle;
}

.baoyi .baokuan .sub-title {
    font-size: 3.055556vw;
    line-height: 6.111111vw;
    color: #6C6C6C;
    vertical-align: middle;
}

.baoyi .baokuan .info {
    margin-top: 2.222222vw;
    width: 100%;
    height: 31.944444vw;
    display: flex;
    justify-content: space-between;
}

.baoyi .baokuan .info .item {
    height: 100%;
    width: 19.444444vw;
    background-color: #fff;
    border-radius: 0.555556vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.baoyi .baokuan .info .item img {
    width: 15.277778vw;
    height: 15.277778vw;
}

.baoyi .baokuan .info .item p {
    margin: 1.388889vw;
    font-size: 2.5vw;
    color: #FF4B61;
}

.baoyi .baokuan .info .item p span {
    font-size: 3.333333vw;
}

.baoyi .baokuan .info .item .youhui {
    width: 13.333333vw;
    height: 5.555556vw;
    background-image: url(./image/lijian.png);
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.944444vw;
    color: #fff;
}

.baoyi .baokuan .info .item .youhui span {
    padding-bottom: 1.388889vw;
}

.baoyi .baokuan .info .item .youhui .price {
    margin-left: 0.555556vw;
    font-size: 2.777778vw;
}


.xinxian {
    width: 95.555556vw;
    height: 46.111111vw;
    margin: 0 auto;
    padding: 0 2.222222vw;
    background-color: #F7EFF5;
    border-radius: 2.222222vw;
}

.xinxian .title {
    height: 5.555556vw;
    margin: 2.777778vw 0vw;
    margin-left: 2.222222vw;
}

.xinxian .info {
    display: flex;
    justify-content: space-between;
}

.xinxian .info .item {
    width: 21.111111vw;
    height: 29.444444vw;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.222222vw;
    border-radius: 2.777778vw;
}

.xinxian .info .item img {
    width: 16.666667vw;
    height: 16.666667vw;
    margin-bottom: 3.888889vw;
}

.xinxian .info .item span {
    font-size: 13px;
    font-weight: 700;
    background-image: linear-gradient(to right, #FD3F8F, #FF773C);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tuijian {
    padding: 2.222222vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.777778vw;
}

.grid-item {
    height: 62.777778vw;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 4.444444vw;
    align-items: center;
}

.grid-item img {
    width: 30.555556vw;
    height: 30.555556vw;
}

.grid-item .name {
    margin: 2.777778vw 0vw;
    display: -webkit-box;
    width: 136px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #434343;
    text-overflow: ellipsis;
    font-size: 3.611111vw;
    font-style: normal;
    font-weight: 300;
    line-height: 4.722222vw;
}

.grid-item .price {
    display: flex;
    align-items: baseline;
    width: 100%;
}

.grid-item .price .p1 {
    color: #191919;
    font-size: 3.611111vw;
    font-style: normal;
    font-weight: 700;
}

.grid-item .price .p2 {
    margin-left: 1.388889vw;
    flex: 1;
    color: #a6a3ad;
    font-size: 2.222222vw;
    font-style: normal;
    font-weight: 300;
    text-decoration: line-through;
}

.grid-item .price .p3 {
    color: #a6a3ad;
    font-size: 2.777778vw;
    font-style: normal;
    font-weight: 300;
}













.footer {
    width: 100vw;
    height: 15.555556vw;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    border-top: 0.555556vw solid #f6f6f6;
}

.footer .tabs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 3.055556vw;
    color: #8a8a8a;
}

.footer .active {
    color: #000;
}

.footer .tabs img {
    width: 6.666667vw;
    height: 6.666667vw;
    margin-bottom: 1.388889vw;
}